<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>amCharts examples</title>
        <link rel="stylesheet" href="style.css" type="text/css">
        <script src="../amcharts/amcharts.js" type="text/javascript"></script>        
        <script type="text/javascript">
            var chart;

            var chartData = [
            // scatter points            
             {
                ax: 1,
                ay: 0.5,
                bx: 1,
                by: 2.2
            }, {
                ax: 2,
                ay: 1.3,
                bx: 2,
                by: 4.9
            }, {
                ax: 3,
                ay: 2.3,
                bx: 3,
                by: 5.1
            }, {
                ax: 4,
                ay: 2.8,
                bx: 4,
                by: 5.3
            }, {
                ax: 5,
                ay: 3.5,
                bx: 5,
                by: 6.1
            }, {
                ax: 6,
                ay: 5.1,
                bx: 6,
                by: 8.3
            }, {
                ax: 7,
                ay: 6.7,
                bx: 7,
                by: 10.5
            }, {
                ax: 8,
                ay: 8.0,
                bx: 8,
                by: 12.3
            }, {
                ax: 9,
                ay: 8.9,
                bx: 9,
                by: 14.5
            }, {
                ax: 10,
                ay: 9.7,
                bx: 10,
                by: 15.0
            }, {
                ax: 11,
                ay: 10.4,
                bx: 11,
                by: 18.8
            }, {
                ax: 12,
                ay: 11.7,
                bx: 12,
                by: 19.0
            }];

            AmCharts.ready(function () {
                // XY CHART
                chart = new AmCharts.AmXYChart();
                chart.pathToImages = "../amcharts/images/";
                chart.dataProvider = chartData;
                chart.startDuration = 1;

                // AXES
                // X
                var xAxis = new AmCharts.ValueAxis();
                xAxis.title = "X Axis";
                xAxis.position = "bottom";
                xAxis.dashLength = 1;
                xAxis.axisAlpha = 0;
                xAxis.autoGridCount = true;
                chart.addValueAxis(xAxis);

                // Y
                var yAxis = new AmCharts.ValueAxis();
                yAxis.position = "left";
                yAxis.title = "Y Axis";
                yAxis.dashLength = 1;
                yAxis.axisAlpha = 0;
                yAxis.autoGridCount = true;
                chart.addValueAxis(yAxis);

                // GRAPHS
                // triangles up			
                var graph1 = new AmCharts.AmGraph();
                graph1.lineColor = "#FF6600";
                graph1.balloonText = "x:[[x]] y:[[y]]";
                graph1.xField = "ax";
                graph1.yField = "ay";
                graph1.lineAlpha = 0;
                graph1.bullet = "triangleUp";
                chart.addGraph(graph1);

                // triangles down 
                var graph2 = new AmCharts.AmGraph();
                graph2.lineColor = "#FCD202";
                graph2.balloonText = "x:[[x]] y:[[y]]";
                graph2.xField = "bx";
                graph2.yField = "by";
                graph2.lineAlpha = 0;
                graph2.bullet = "triangleDown";
                chart.addGraph(graph2);

                // first trend line
                var trendLine = new AmCharts.TrendLine();
                trendLine.lineColor = "#FF6600";
                trendLine.initialXValue = 1;
                trendLine.initialValue = 2;
                trendLine.finalXValue = 12;
                trendLine.finalValue = 11;                
                chart.addTrendLine(trendLine);
                
                // second trend line
                var trendLine = new AmCharts.TrendLine();
                trendLine.lineColor = "#FCD202";
                trendLine.initialXValue = 1;
                trendLine.initialValue = 1;
                trendLine.finalXValue = 12;
                trendLine.finalValue = 19;                
                chart.addTrendLine(trendLine);                 

                // CURSOR
                var chartCursor = new AmCharts.ChartCursor();
                chart.addChartCursor(chartCursor);

                // SCROLLBAR
                var chartScrollbar = new AmCharts.ChartScrollbar();
                chart.addChartScrollbar(chartScrollbar);

                // WRITE                                                
                chart.write("chartdiv");
            });
        </script>
    </head>
    
    <body>
        <div id="chartdiv" style="width: 600px; height: 400px;"></div>
    </body>

</html>